﻿@{
    ViewBag.Title = "学生管理";
    Layout = "~/Views/Shared/_GridCommonLayout.cshtml";
}

<!--begin grid code-->


<section id="widget-grid" class="">
    <div class="row">

        <!--Operation-->
        <div class="heading-buttons">


            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
                <h1 class="page-title txt-color-blueDark"><i class="fa fa-user "></i>
                    学生信息管理			
                </h1>
            </div>
            <div class="buttons pull-right">

                <button type="button" class="btn btn-success btn-labeled "
                    data-bind="click: $root.showAddBefore">
                    <span class="btn-label"><i class="glyphicon glyphicon-plus"></i>
                    </span>添加记录</button>

                <button type="button" class="btn btn-primary btn-labeled "
                    data-bind="click: $root.onDataDeleting">
                    <span class="btn-label"><i class="glyphicon glyphicon-remove"></i>
                    </span>批量删除</button>
            </div>
            <div style="clear: both;">
            </div>
        </div>
        <!--/Operation-->


        <!--Search-->
        <div class="filter-bar">
            <form id="formSearch">
                <div class="lbl glyphicons search" style="cursor: pointer;" data-bind="click: $root.search">
                    <i></i>筛选
                </div>

                <div>
                    <label>学号:</label><div class='input-append'>
                        <input id='txtbSrSNo' name='txtbSrSNo' type='text' placeholder='学号' class='input-mini' style='width: 120px;' />
                    </div>
                </div>

                <div>
                    <label>院系名称:</label><div class='input-append'>
                        <input id='txtbSrSColleName' name='txtbSrSColleName' type='text' placeholder='院系名称' class='input-mini' style='width: 120px;' />
                    </div>
                </div>

                <div>
                    <label>专业名称:</label><div class='input-append'>
                        <input id='txtbSrSProName' name='txtbSrSProName' type='text' placeholder='专业名称' class='input-mini' style='width: 120px;' />
                    </div>
                </div>

                <div>
                    <label>状态(是否休学或在读):</label>
                    @{
                        List<SelectListItem> stateList = new List<SelectListItem>();
                        stateList.Add(new SelectListItem { Text = "在读", Value = "3" });
                        stateList.Add(new SelectListItem { Text = "休学", Value = "4" });  
                    }
                    @Html.DropDownList("txtbSrIState", stateList as IEnumerable<SelectListItem>, "--请选择--", new { @style = "width: 120px;border:1px solid #cccccc" })
                </div>

                <div class="clearfix">
                </div>
            </form>
        </div>
        <!--/search-->



        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
            <div id="wid-id-0" class="jarviswidget jarviswidget-color-darken jarviswidget-sortable" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"><i class="fa fa-table"></i></span>
                    <h2>学生信息</h2>
                </header>
                <div style="margin-top: 35px;">
                    <div class="jarviswidget-editbox"></div>
                    <div class="widget-body no-padding">
                        <div role="grid" id="providerGrid" class="dataTables_wrapper form-inline">
                            <div class="table-responsive">

                                <div class="dt-wrapper" style="overflow-y: auto;">
                                    <table class="table table-striped table-bordered table-hover checkboxs">
                                        <!--table head-->
                                        <thead>
                                            <tr>
                                                <th style="width: 1%">
                                                    <input type="checkbox" value="0" />
                                                </th>
                                                <!-- ko foreach: headers -->
                                                <th class="center ">
                                                    <a href="#" data-bind="text: displayText@*, click: $root.sort*@" style="color: black"></a>
                                                    <i class="icon-circle-arrow-up" data-bind="    visible: value == $root.orderBy() && $root.isAsc()"></i>
                                                    <i class="icon-circle-arrow-down" data-bind="    visible: value == $root.orderBy() && !$root.isAsc()"></i>
                                                </th>
                                                <!-- /ko -->
                                                <th class="center" style="width: 60px">操作
                                                </th>
                                            </tr>
                                        </thead>
                                        <!--/table head-->
                                        <!--table body(Provider list)-->
                                        <tbody data-bind="foreach: recordSet">
                                            <tr class="selectable" onclick="">
                                                <td class="center">
                                                    <input type="checkbox" name="userSelector" data-bind="value: Id" />
                                                    <input type="hidden" data-bind="value: Id, attr: { id: Id }" />
                                                </td>

                                                <td class='center'><strong data-bind='text: Id'></strong></td>
                                                <td class='center'><strong data-bind='text: SNo'></strong></td>
                                                <td class='center'><strong data-bind='text: SName'></strong></td>
                                                <td class='center'><strong data-bind='text: sexChange(ISex)'></strong></td>
                                                <td class='center'><strong data-bind='text: SIdCard'></strong></td>
                                                <td class='center'><strong data-bind='text: SColleName'></strong></td>
                                                <td class='center'><strong data-bind='text: SProName'></strong></td>
                                                <td class='center'><strong data-bind='text: SClassName'></strong></td>
                                                <td class='center'><strong data-bind='text: StateChange(IState)'></strong></td>
                                                <td class='center'><strong data-bind='text: date(DLastDate)'></strong></td>
                                                <td class='center'><strong data-bind='text: SEmail'></strong></td>
                                                <td class='center'><strong data-bind='text: SPhone'></strong></td>

                                                <td class="center">
                                                    <a href="#" class="btn-action glyphicons pencil btn-success" data-bind="click: $root.showUpdateModal">
                                                        <i></i></a>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <!--/table body( Provider list)-->

                                    </table>

                                </div>



                                <!-- 分页 -->
                                <ul class="pagination pagination-alt">
                                    <li>
                                        <a data-bind="click: firstPage"><i class="fa fa-fast-backward "></i></a>
                                    </li>
                                    <li>
                                        <a data-bind="click: prevPage"><i class="fa  fa-backward  "></i></a>
                                    </li>
                                    <li>
                                        <a>
                                            <input id="toPage" type="text" data-bind="value: pageIndex, event: { change: $root.changePageIndex }" style="width: 25px;" />
                                            /共<span data-bind="html: totalPages"></span>页 
                                        </a>
                                    </li>
                                    <li>
                                        <a data-bind="click: nextPage"><i class="fa fa-forward "></i></a>
                                    </li>
                                    <li>
                                        <a data-bind="click: lastPage"><i class="fa fa-fast-forward "></i></a>
                                    </li>
                                </ul>

                                <div class="dt-top-row total  ">
                                    当前记录共：<span data-bind="html: totalCount"></span>条
                                </div>
                                <!--end 分页-->
                            </div>

                            <!-- /分页 -->
                        </div>

                        <!-- /分页 -->
                    </div>
                </div>

            </div>
        </article>

    </div>
    <!--end row-->
</section>


<!--Students详细对话框-->
<div id="StudentsMessageModal" class="modal fade" id="ProviderMessageModal" tabindex="-1" role="dialog"
    aria-labelledby="StudentsMessageModalLabel" aria-hidden="true" style="width: 800px;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose">×</button>
            <h3>学生详细信息</h3>
        </div>

        <div class="modal-header">

            <ul class="nav nav-tabs bordered" id="myTab1">
                <li class="active"><a data-toggle="tab" href="#s1">详细信息</a></li>
                <li><a data-toggle="tab" href="#s2">设置密码</a></li>
                <li><a data-toggle="tab" href="#s3">个人介绍</a></li>
            </ul>
            <div class="tab-content padding-10" id="myTabContent1">
                <!--详细信息-->
                <div class="tab-pane fade in active" id="s1">
                    <div class="modal-body">
                        <input type='hidden' id='txtbID' name='txtbID' />
                        <form class="smart-form" id="formStudents">
                            <!--ko with: NodeValue-->
                            <div class="row">
                                <section class="col col-6">
                                    <label class='label'>学号:<span style='color: Red; font-size: 20px;'>*</span></label>
                                    <label class="input">
                                        <input type='text' id='txtbSNo' name='txtbSNo' placeholder='' class='span10' data-bind='value:SNo' />
                                    </label>
                                </section>

                                <section class="col col-6">
                                    <label class='label'>姓名:</label>
                                    <label class="input">
                                        <input type='text' id='txtbSName' name='txtbSName' placeholder='' class='span10' data-bind='value:SName' />
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <section class="col col-6">
                                    <label class='label'>性别:</label>
                                    <label class="select">
                                        @{
                                            List<SelectListItem> SexList = new List<SelectListItem>();
                                            SexList.Add(new SelectListItem { Text = "不详", Value = "0" });
                                            SexList.Add(new SelectListItem { Text = "女", Value = "1" });
                                            SexList.Add(new SelectListItem { Text = "男", Value = "2" });  
                                        }
                                        @Html.DropDownList("txtbISex", SexList as IEnumerable<SelectListItem>, "--请选择--", new { @data_bind = "value:ISex" })
                                    </label>
                                </section>

                                <section class="col col-6">
                                    <label class='label'>身份证号:</label>
                                    <label class="input">
                                        <input type='text' id='txtbSIdCard' name='txtbSIdCard' placeholder='' class='span10' data-bind='value:SIdCard' />
                                    </label>
                                </section>
                            </div>
                            <div class="row">

                                <section class="col col-6">
                                    <label class="label">学院:</label>
                                    <label class="select">
                                        @Html.DropDownList("txtbSCollegeCode", new SelectList(@ViewBag.partList, "SCollegeCode", "SCollegeName"), "--请选择学院--", new { @data_bind = "value:$root.CollegeCode" })
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class="label">专业:</label>
                                    <label class="select">
                                       <select id="txtbSProCode" name="txtbSProCode" data-bind="options:$root.pros,optionsCaption:'--请选择专业--',optionsValue:'SCollegeCode',optionsText:'SCollegeName',value:$root.ProCode">                                          
                                       </select>                                           
                                    </label>
                                </section>
                            </div>
                            <!--/ko-->
                            <section class="col-12">
                                <label class='label'>班级(请输入):</label>
                                <label class="input">
                                    <input type='text' id='txtbSClassCode' name='txtbSClassCode' placeholder='' class='span10' />
                                </label>
                            </section>
                            <!--ko with: NodeValue-->
                            <div class="row">
                                <section class="col col-6">
                                    <label class='label'>出生日期:</label>
                                    <label class="input">
                                        <input type='text' id='txtbDBirthDay' name='txtbDBirthDay' placeholder='yyyy/mm/dd' class='span10' data-bind='value:DBirthDay' />
                                    </label>
                                </section>

                                <section class="col col-6">
                                    <label class='label'>状态（是否休学或在读）:</label>
                                    <label class="select">
                                        @{
                                            List<SelectListItem> StateList = new List<SelectListItem>();
                                            StateList.Add(new SelectListItem { Text = "在读", Value = "3", Selected = true });
                                            StateList.Add(new SelectListItem { Text = "休学", Value = "4" });  
                                        }
                                        @Html.DropDownList("txtbIState", StateList as IEnumerable<SelectListItem>, new { @data_bind = "value:IState" })
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <section class="col col-6">
                                    <label class='label'>电话:</label>
                                    <label class="input">
                                        <input type='text' id='txtbSPhone' name='txtbSPhone' placeholder='电话' class='span10' data-bind='value:SPhone' />
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class='label'>QQ:</label>
                                    <label class="input">
                                        <input type='text' id='txtbSQq' name='txtbSQq' placeholder='qq' class='span10' data-bind='value:SQq' />
                                    </label>
                                </section>
                            </div>
                            <section class="col-12">
                                    <label class='label'>邮箱地址:</label>
                                    <label class="input">
                                        <input type='text' id='txtbSEmail' name='txtbSEmail' placeholder='邮件' class='span10' data-bind='value:SEmail' />
                                    </label>
                                </section>
                            <!--/ko-->
                        </form>
                    </div>
                </div>

                <!--设置密码-->
                <div class="tab-pane fade in " id="s2">
                    <form class="smart-form" data-bind="with:NodeValue">
                        <fieldset>
                            <section>
                                <label class='control-label'>密码<span style="color: red;">*(长度为6-20)</span></label>
                                <label class="input">
                                    <input type="password" id='txtbSPassWord' name='txtbSPassWord' placeholder='' class='span10' data-bind='value:SPassWord' />
                                </label>
                            </section>

                            <section>
                                <label class='control-label'>确认密码<span style="color: red;">*</span></label>
                                <label class="input">
                                    <input type="password" id='confirm_password' name='confirm_password' placeholder='' class='span10' data-bind='value:SPassWord' />
                                </label>
                            </section>
                        </fieldset>
                    </form>
                </div>

                <!--个人介绍-->
                <div class="tab-pane fade in " id="s3">
                    <div class="click2edit" style="height: 400px;"></div>
                </div>

                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true" id="btnCancel">
                        取消</button>
                    <button id="btnSaveOrUpdateModel" class="btn btn-primary" aria-hidden="true" data-bind=" click: onDataAddingOrUpdate">
                        确定</button>
                </div>
            </div>
        </div>
        <!--end div content-->
    </div>
</div>
<!--/详细Students对话框-->

@section script{

    <script src="~/Js/plugin/summernote/summernote.js"></script>
    <script src="~/Scripts/md5/jQuery.md5.js"></script>
    <script src="~/Scripts/md5/jQuery.md5.js"></script>
    <script type="text/javascript">

        //规范时间显示格式
        function date(date) {
            if (date == null || date == "") {
                return "";
            }
            var dd = date.slice(0, 10);
            var ss = date.slice(11, 19);
            return dd + " " + ss;
        }

        //初始化编辑器
        var edit = function () {
            $('.click2edit').summernote({ focus: true });
        };

        //性别的转换
        var sexChange = function (Isex) {
            if (Isex == 0)
                return "";
            else if (Isex == 1)
                return "女";
            else
                return "男";
        }

        //休学or在读状态显示转换
        var StateChange = function (IState) {
            if (IState == 3)
                return "在读";
            else
                return "休学";
        }

        //验证密码
        var VerifyPassword = function () {

            //验证两次输入的密码是否一致
            var p1 = $("#txtbSPassWord").val();
            var p2 = $("#confirm_password").val();
            if (p1 == "" || p2 == "") {
                alert("请填写密码");
                return false;
            }
            else if (p1.length < 6 || p1.length > 20) {
                alert("密码长度为6—20位");
                return false;
            }
            else if (p1 != p2) {
                alert("两次密码输入不一致");
                $("#txtbSPassWord").val("");
                $("#confirm_password").val("");
                return false;
            }
            else {
                return true;
            }
        }

        var gdViewModel;
            $(function () {

                edit();
                $(".note-editable").css("height", "310px");

                $._messengerDefaults = {
                    extraClasses: 'messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right'
                }; //默认提示位置;


                var options = {


                    dialogId: "StudentsMessageModal", //添加对话框

                    pageSize: 20, //分页大小
                    hidId: $("#txtbID"),
                    SaveUpdateBtn: $("#btnSaveOrUpdateModel"),
                    frmElement: $("#formStudents"),

                    //节点数据
                    NodeValue: ko.observable({

                        Id: 0,
                        SNo: '',
                        SName: '',
                        ISex: 0,
                        SIdCard: '',
                        DBirthDay: '',
                        SColleCode: '',
                        SColleName: '',
                        SProCode: '',
                        SProName: '',
                        SPassWord: '',
                        SPicUrl: '',
                        SIntro: '',
                        IState: 3,
                        DLastDate: new Date(),
                        DLastIp: '',
                        SClassCode: '',
                        SClassName: '',
                        SEmail: '',
                        SPhone: '',
                        SQq: '',
                    }),


                    //用户列表Grid头部列名称
                    headers: [

         { displayText: 'ID', value: 'Id', width: 'auto' },
         { displayText: '学号', value: 'SNo', width: 'auto' },
         { displayText: '姓名', value: 'SName', width: 'auto' },
         { displayText: '性别', value: 'ISex', width: 'auto' },
         { displayText: '身份证号', value: 'SIdCard', width: 'auto' },
         { displayText: '院系名称', value: 'SColleName', width: 'auto' },
         { displayText: '专业名称', value: 'SProName', width: 'auto' },
         { displayText: '班级名称', value: 'SClassName', width: 'auto' },
         { displayText: '状态', value: 'IState', width: 'auto' },
         { displayText: '最后登陆时间', value: 'DLastDate', width: 'auto' },
         { displayText: '电子邮箱', value: 'SEmail', width: 'auto' },
         { displayText: '电话', value: 'SPhone', width: 'auto' },

                    ],

                    //默认的排序方式
                    defaultOrderBy: "Id",
                    //用户查询URL
                    dataQueryUrlAccessor: function () {
                        return "/api/Students/GetByPage";
                    },

                    //添加用户URL
                    dataAddUrlAccessor: function () { return "/api/StudentManger/PostStu"; },
                    dataUpdateAccessor: function (key) {

                        password = $("#txtbSPassWord").val();
                        if (password != "") {
                            //验证密码
                            if (!VerifyPassword()) {
                                return;//验证失败
                            }
                            //密码
                            options.NodeValue().SPassWord = $("#txtbSPassWord").val();
                        }

                        //取得学院名称
                        var Name = $("#txtbSCollegeCode").find("option:selected").text();
                        var SColleName = Name.split("_", 2);
                        options.NodeValue().SColleCode = SColleName[0];
                        options.NodeValue().SColleName = SColleName[1];

                        //取得专业名称
                        options.NodeValue().SProCode = $("#txtbSProCode").find("option:selected").val();
                        options.NodeValue().SProName = $("#txtbSProCode").find("option:selected").text();

                        //取得班级名称
                        var Name = $("#txtbSClassCode").val().split(":");
                        options.NodeValue().SClassCode = Name[0];
                        options.NodeValue().SClassName = Name[1];

                        //个人介绍
                        options.NodeValue().SIntro = $(".note-editable").code();
                        

                        return "/api/StudentManger/PutStu/" + key;
                    },
                    dataNodeSelect: function (id) {
                        return "/api/StudentManger/GetStu/" + id;
                    },

                    dataDeleteAccessor: function (data) {
                        var userIDs = "";
                        var check = $("input:checked");  //得到所有被选中的checkbox
                        check.each(function (i) {        //循环拼装被选中项的值
                            userIDs = userIDs + ',' + $(this).val();
                        });
                        //清除多余的分割号
                        userIDs = dropRsplit(userIDs, ",");
                        if (userIDs != "") {
                            return appendQueryString("/api/Students/DeleteIds", { ids: userIDs });
                        } else
                            return "";

                    }
                    , initEd: function () {
                        //gird初始化的后置事件 信息
                    }
                    , AddBefore: function () {//表单发送前的函数                      

                        //取得学院名称
                        var Name = $("#txtbSCollegeCode").find("option:selected").text();
                        var SColleName = Name.split("_", 2);
                        options.NodeValue().SColleCode = SColleName[0];
                        options.NodeValue().SColleName = SColleName[1];

                        //取得专业名称     
                        options.NodeValue().SProCode = $("#txtbSProCode").find("option:selected").val();
                        options.NodeValue().SProName = $("#txtbSProCode").find("option:selected").text();

                        //取得班级名称    
                        var Name = $("#txtbSClassCode").val().split(":", 2);
                        options.NodeValue().SClassCode = Name[0];               
                        options.NodeValue().SClassName = Name[1];
                    
                        //验证两次输入的密码是否一致
                        var p1 = $("#txtbSPassWord").val();
                        var p2 = $("#confirm_password").val();
                        if (p1 == "" || p2 == "") {
                            alert("请填写密码");
                            return;
                        }
                        if (p1.length < 6 || p1.length > 20) {
                            alert("密码长度为6—20位");
                            return;
                        }
                        if (p1 != p2) {
                            alert("两次密码输入不一致");
                            $("#txtbSPassWord").val("");
                            $("#confirm_password").val("");
                            return;
                        }

                        options.NodeValue().SPassWord = $("#txtbSPassWord").val();
                        options.NodeValue().SIntro = $(".note-editable").code();
                        return true;
                    }
                     , showDlgBefore: function () {
                     
                     }
                    , changeEnd: function () {
                        //对话框关闭后 的后置事件
                        $("#txtbSPassWord").val("");
                        $("#confirm_password").val("");
                        $(".note-editable").text("");
                    }
                    , showDetailEnd: function (data) {
                        //显示对话框详细之后

                        gdViewModel.CollegeCode(data.SColleCode);
                        $(".note-editable").prepend(data.SIntro);
                        $("#txtbSClassCode").val(data.SClassCode + ':' + data.SClassName);
                        gdViewModel.ProCode(data.SProCode);
                    }

                };           


            
            

                gdViewModel = new gridViewModel(options);
                gdViewModel.ProCode = ko.observable();
                gdViewModel.pros = ko.observableArray();
                gdViewModel.CollegeCode = ko.observable(options.NodeValue().SColleCode);
            

                ko.computed(function () {
                    $.ajax({
                        type: "post",
                        url: "/Api/Addvaildate/AddPros?collegeCode=" + gdViewModel.CollegeCode(),
                        dataType: "Json"
                    })
                    .done(function (data) {
                        gdViewModel.pros(data);

                        gdViewModel.ProCode(gdViewModel.NodeValue().SProCode);
                   
                    })
                });


                gdViewModel.init();
                ko.applyBindings(gdViewModel);


                options.frmElement.validate({
                    rules: {

                        txtbId: { required: true, digits: true },
                        txtbSNo: { required: true, maxlength: 10 },
                        txtbSName: { maxlength: 50 },
                        txtbISex: { digits: true },
                        txtbSIdCard: { maxlength: 50 },
                        txtbDBirthDay: { date: true },                   
                        txtbIState: { digits: true },
                        txtbDLastDate: { date: true },
                        txtbDLastIp: { date: true },
                        txtbSClassCode: { maohao1: true },                   
                        txtbSEmail: { email: true },
                        txtbSPhone: { mobile: true },
                        txtbSQq: { qq: true }

                    },
                    messages: {

                        txtbId: { required: '必填项', digits: '必须是整数' },
                        txtbSNo: { required: '必填项', maxlength: '最大长度为10' },
                        txtbSName: { maxlength: '最大长度为25' },
                        txtbISex: { digits: '必须是整数' },
                        txtbSIdCard: { maxlength: '最大长度为25' },
                        txtbDBirthDay: { date: '必须是日期格式，例如：2013/01/01' },                  
                        txtbIState: { digits: '必须是整数' },
                        txtbDLastDate: { date: '必须是日期格式，例如：2013/01/01' },
                        txtbDLastIp: { date: '必须是日期格式，例如：2013/01/01' },
                    
                        txtbSClassName: { maxlength: '最大长度为10' },
                        txtbSEmail: { email: '请输入正确的邮箱地址' },
                        txtbSPhone: { mobile: '请正确填写手机号' },
                        txtbSQq: { qq: '请输入正确的QQ号' }
    
                    }
                });

                //验证学号唯一
                $("#txtbSNo").blur(function () {
                    $.getJSON("/api/AddVaildate/StudentNoValidate?StuNo=" + $("#txtbSNo").val(), function (data) {
                        if (data != "") {
                            alert("该学号已存在")
                            $("#txtbSNo").val("");
                        }
                    })
                });

                //点击“取消”按钮清空已填内容
                $("#btnCancel").click(function () {
                    $("#txtbSPassWord").val("");
                    $("#confirm_password").val("");
                    $(".note-editable").text("");
                });

                //点击“关闭”按钮清空已填内容
                $("#btnClose").click(function () {
                    $("#txtbSPassWord").val("");
                    $("#confirm_password").val("");
                    $(".note-editable").text("");
                });


                //班级输入提示
                $("#txtbSClassCode").typeahead({
                    source: function (query, process) {
                        var sno = $('#txtbSClassCode');
                        var url = "/Api/DeanClass/GetAll"
                        $.ajax({
                            type: "post",
                            url: url
                        }).done(function (data) {
                            var arr = [];
                            for (i in data) {
                                arr.push(data[i].SClassCode + ":" + data[i].SClassName);
                            }
                            process(arr);
                        })
                    }
                });
            });

    </script>

}




<!--/end grid code-->
